<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link th:replace="fragments/dependency :: list-css">

<link href="/vendors/zTree_v3/css/zTreeStyle/zTreeStyle.css"
	rel="stylesheet">





<title>优铺Admin</title>
</head>

<body class="nav-md">
	<div class="container body">
		<div class="main_container">
			<!-- Left Menu -->
			<div th:replace="fragments/leftMenu :: leftMenu"></div>

			<!-- top navigation -->
			<div th:replace="fragments/header :: header"></div>


			<!-- page content -->
			<div class="right_col" role="main">
				<div class="ln_solid"></div>
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>角色权限配置</h2>
							<ul class="nav navbar-right panel_toolbox">
								<li><a class="collapse-link"><i
										class="fa fa-chevron-up"></i></a></li>
							</ul>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<div class="form-group">
								<div class="col-md-5 col-sm-12 col-xs-12">
									<select class="form-control" id="sysRole" name="sysRole">
										<option value="" selected>请选择要配置的角色</option>
										<option th:each="item:${roles}" th:value="${item.id}"
											th:text="${item.roleName}">Option one</option>
									</select>
								</div>
								<div class="col-md-3">
									<button id="saveBtn" class="btn btn-primary disabled">保存</button>
								</div>
								<div class="col-md-12">
									<ul id="appTree" class="ztree"></ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

				<!-- footer content -->
				<footer>
					<div class="pull-right">
						Powered by YouPu team<a target="_blank"
							href="http://www.youpuchina.com"></a>
					</div>
					<div class="clearfix"></div>
				</footer>
				<!-- /footer content -->
			</div>
		</div>

		<div th:replace="fragments/dependency :: list-js"></div>

		<script src="/vendors/zTree_v3/js/jquery.ztree.core.min.js"></script>
		<script type="text/javascript"
			src="/vendors/zTree_v3/js/jquery.ztree.excheck.js"></script>
		<script type="text/javascript">
			var list = {
				init : function() {
					$("#sysRole").on(
							"change",
							function() {
								var roleID = $("#sysRole").val();
								if (roleID == "") {
									list.treeData = "";
									list.treeInit();
									$("#saveBtn").addClass("disabled");
								} else {
									httpClientForUpAdmin.get(
											"/sysRoleApp/getApps?roleID="
													+ roleID, null, function(
													data) {
												list.treeData = data;
												list.treeInit();
												$("#saveBtn").removeClass(
														"disabled");
											});
								}
							});
					$("#saveBtn")
							.on(
									"click",
									function() {
										var roleID = $("#sysRole").val();

										if (roleID != "") {
											$("#saveBtn").addClass("disabled");
											var treeObj = $.fn.zTree
													.getZTreeObj("appTree");
											var appIDs = new Array();
											treeObj.getCheckedNodes(true)
													.forEach(function(x) {
														appIDs.push(x.id)
													});
											var p = {
												roleID : roleID,
												appIDs : appIDs.join(",")
											}
											httpClientForUpAdmin
													.post(
															"/sysRoleApp/saveApps",
															p,
															function(data) {
																if (data) {
																	adminLayer
																			.alert({
																				content : '修改成功',
																				yes : function() {
																					$(
																							"#saveBtn")
																							.removeClass(
																									"disabled");
																				}
																			});
																}

															});
										}
									});
				},

				treeData : null,

				treeSetting : {
					check : {
						enable : true
					},
					data : {
						simpleData : {
							enable : true,
							idKey : "id",
							pIdKey : "pid",
							rootPId : 0
						}
					}
				},

				treeInit : function() {
					var treeObj = $.fn.zTree.getZTreeObj("appTree");
					if (treeObj != null)
						treeObj.destroy();
					$.fn.zTree.init($("#appTree"), list.treeSetting,
							list.treeData);
				}

			};
			$(document).ready(list.init());
		</script>
</body>
</html>
